<template>
  <div class="contain-table" v-show="selectedTabId == 1">
    <!-- 列表-->
    <div class="dataList">
      <ul class="list">
        <li>序号</li>
        <li>类型</li>
        <li>页数</li>
        <!-- <li>来源</li> -->
        <li>文件名称</li>
        <li>大小</li>
        <li>上传时间</li>
        <!-- <li>标签</li> -->
        <li>下载量</li>
        <li>上传人</li>
        <!-- <li>审核状态</li> -->
        <li>操作</li>
      </ul>
      <div class="newList">
        <ul v-for="(item, index) in dataInfoList" :key="index">
          <li>{{ index + 1 }}</li>
          <li>
            {{ item.fileType }}
          </li>
          <li>{{ item.pageNumber }}</li>
          <!-- <li>{{ item.fileName }}</li> -->
          <li :title="item.fileName">{{ item.fileName }}</li>
          <li>{{ $byteConvert(item.fileSize) }}</li>
          <li>{{ item.createDate }}</li>
          <!-- <li>
            <tagsGroup
              :showTagsArr="[item.categoryTypeList.map((key) => key.id)[0]]"
            ></tagsGroup>
          </li> -->
          <li>{{ item.downloads }}</li>
          <li>{{ item.operator }}</li>
          <!-- <li>
            <span :class="getExamineClass(item.isExamine)">{{
              getExamineType(item.isExamine)
            }}</span>
          </li> -->
          <li>
            <div @click="goDetail(item)" class="btn">详情</div>
            <div @click="evaluateDialogClick(item.id)" class="btn">评价</div>
            <div @click="review(item)" class="btn" v-show="examining">审核</div>
          </li>
        </ul>
      </div>
    </div>
    <editinfoDialog
      ref="editinfoDialog"
      :title="title"
      :formLabelAlign="obj"
      :checkedId="realChecked"
      :fileList="fileList"
      :item="item"
      @syncDataInfo="syncDataInfo"
    ></editinfoDialog>
    <evaluateDialog
      ref="evaluateDialog"
      @evaluateDialogConfirm="evaluateDialogConfirm($event)"
    ></evaluateDialog>
  </div>
</template>

<script>
import editinfoDialog from "../common/editAddInfoDialog";
import evaluateDialog from "../common/evaluateDialog";
// import tagsGroup from "../common/tagsGroup";
import { mapState } from "vuex";
export default {
  props: {
    selectedTabId: {
      default: () => 1,
    },
    dataInfoList: {
      default: () => [],
    },
  },
  components: {
    editinfoDialog,
    evaluateDialog,
    // tagsGroup,
  },
  data() {
    return {
      current: 1,
      valuation: false,
      clickId: "",
      obj: {
        fileName: "",
        memo: "",
        id: "",
        examineType: 2,
        expertMemo: "",
      },
      realChecked: [],
      fileList: [],
      title: "审核",
      item: "",
    };
  },
  updated() {},
  computed: {
    ...mapState({
      dataTypeTabsId(state) {
        return state.app.dataTypeTabsId;
      },
      examining(state) {
        return state.app.examining;
      },
    }),
  },
  created() {},
  methods: {
    getExamineType(type) {
      if (type == 1) {
        return "未审核";
      } else if (type == 2) {
        return "审核通过";
      } else if (type == 3) {
        return "废弃";
      } else if (type == 4) {
        return "存疑";
      }
    },
    getExamineClass(type) {
      if (type == 1) {
        return "examine1";
      } else if (type == 2) {
        return "examine2";
      } else if (type == 3) {
        return "examine3";
      } else if (type == 4) {
        return "examine4";
      }
    },
    goDetail(item) {
      this.$router.push({
        name: "docDetail",
        params: {
          item: item,
        },
      });
    },
    syncDataInfo(dataList) {
      console.log(dataList);
      this.dataInfoList = dataList;
    },
    // 评价
    evaluateDialogConfirm({ value, text }) {
      console.log(this.dataTypeTabsId);
      if (value == "") {
        this.$message({
          type: "warning",
          message: "请评分!",
          showClose: true,
        });
        return;
      }
      if (text == "") {
        this.$message({
          type: "warning",
          message: "请输入您的评价!",
          showClose: true,
        });
        return;
      }
      console.log(123, value, text);
      this.dialogVisible = false;
      this.$api
        .savedatatEvaluate({
          connectionType: this.dataTypeTabsId,
          evaluate: text,
          score: value,
          userId: "1",
          id: this.clickId,
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "评价成功!",
            showClose: true,
          });
        });
    },

    // 审核
    review(item) {
      this.$refs.editinfoDialog.openDialog();
      this.obj.fileName = item.fileName;
      this.obj.memo = item.memo;
      this.obj.id = item.id;
      this.item = item;
      for (let i = 0; i < item.categoryTypeList.length; i++) {
        this.realChecked.push(item.categoryTypeList[i].id);
      }
      console.log(this.realChecked);
      this.fileList = [{ name: "", response: "" }];
      // this.fileList[0].name = item.uploadFileName;
      // this.fileList[0].response = item.fileUrl;

      // console.log(222, this.realChecked);
      this.fileList[0].name = item.fileName;
      this.fileList[0].response = item.fileUrl;
      this.item = item;
      this.obj.fileList = this.fileList;
    },
    // 评价
    evaluateDialogClick(id) {
      this.$refs.evaluateDialog.openDialog();
      this.clickId = id;
    },
    async dataFindAll() {
      let data = await this.$api.dataFindAll();
      console.log(2, data);
      this.dataTree = data.map((item) => {
        return {
          id: item.id,
          label: item.targetName,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contain-table {
  @import "~@/styles/mixin.scss";
  width: 100%;
  min-height: calc(100vh - 2rem);
  color: #ffffff;
  .dataList {
    width: 100%;
    color: #ffffff;
    margin-bottom: 0.3rem;
    .list {
      width: 100%;
      height: 0.54rem;
      background: #034576;
      margin: 0.1rem auto;
      line-height: 0.54rem;
      font-size: 0.16rem;
      text-align: center;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #cccccc;
      display: flex;
      /* li {
        width: 10%;
        margin: 0 0.46rem;
      }
      li:nth-child(2) {
        width: 8%;
        margin: 0 -4px;
      }
      li:nth-of-type(5) {
        margin-right: 0.36rem;
      }
      li:nth-child(6) {
        width: 20%;
        margin: 0;
      } */
    }
    .newList {
      width: 100%;
      height: auto;
    }
    ul {
      width: 100%;
      height: 0.54rem;
      margin: 0 auto;
      line-height: 0.54rem;
      font-size: 0.14rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #cccccc;
      display: flex;
      li {
        width: 0.96rem;
        padding: 0 0.2rem;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
      }
      li:nth-of-type(2) {
        width: 1.4rem;
        // margin-left: 0.24rem;
      }
      li:nth-of-type(3) {
        // margin: 0 0.1rem 0 0.2rem;
      }
      li:nth-of-type(4) {
        width: 6rem;
      }
      li:nth-of-type(5) {
        width: 1.2rem;
      }
      li:nth-of-type(6) {
        width: 2.6rem;
      }
      li:nth-of-type(7) {
        width: 1.4rem;
        // padding: 0 0.16rem;
        // margin: 0 0 0 0.12rem;
      }
      ::v-deep.group .tag {
        margin: auto;
      }
      li:nth-of-type(8) {
        width: 1.8rem;
      }
      li:nth-child(9) {
        width: 2.6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
          width: 0.88rem;
          height: 0.28rem;
          background: #1890ff;
          text-align: center;
          // padding: 0.04rem 0;
          margin: 0.02rem 0.04rem;
          border-radius: 0.05rem;
          line-height: 0.28rem;
          font-size: 0.14rem;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
        }
        .active {
          background: #99b5ce;
        }
      }
    }
  }
}
.examine1 {
  color: #409eff;
}
.examine2 {
  color: #67c23a;
}
.examine3 {
  color: #f56c6c;
}
.examine4 {
  color: #e6a23c;
}
</style>
